import React, { Component } from "react";
import { View, Text, TouchableOpacity, Image } from "react-native";

import Config from "../../config";
import SizeUtils from "../../common/SizeUtils";
import ImageConstants from "../../common/ImageConstants";
import { DateUtils } from "../../utils/Utils";
import CommonStyles from "../../common/CommonStyles";
import BaseItem from "../common/BaseItem";
import CommonListPage from "../common/CommonListPage";
import ActivityRequestBaomingAction from "../../actions/activity/ActivityRequestBaomingAction";

export default class UserBaomingPage extends CommonListPage {
  constructor(props) {
    super(props);

    this._dataKey = "activity_id";
  }

  _onRenderItem(data, index) {
    return <Item data={data} />;
  }

  _onPressItem(data) {
    this.gotoPage(Config.pages.activity_content, data);
  }

  _requestData(page, listView) {
    new ActivityRequestBaomingAction().call(listView, {
      page: page,
      page_size: 10
    });
  }
}

class Item extends BaseItem {
  render() {
    return (
      <View
        style={{
          backgroundColor: "#ffffff",
          paddingTop: SizeUtils.translateDesignHeightToCode(40)
        }}
      >
        <View
          style={{
            flexDirection: "row",
            height: SizeUtils.translateDesignHeightToCode(188),
            borderColor: "#eeeeee",
            borderBottomWidth: SizeUtils.translateDesignNumToCode(2),
            width:
              SizeUtils.getWindowSize().width -
              SizeUtils.translateDesignWidthToCode(80 + 4)
          }}
        >
          <Image
            source={this._getShowImageSource(this.props.data)}
            style={{
              width: SizeUtils.translateDesignWidthToCode(180),
              height: SizeUtils.translateDesignWidthToCode(140)
            }}
          />
          <View
            style={{
              flex: 1,
              flexDirection: "column",
              height: SizeUtils.translateDesignHeightToCode(140),
              justifyContent: "space-between",
              left: SizeUtils.translateDesignWidthToCode(20),
              paddingRight: SizeUtils.translateDesignWidthToCode(20)
            }}
          >
            <Text
              style={[
                CommonStyles.primaryText,
                {
                  fontSize: SizeUtils.translateFontSizeToCode(32),
                  backgroundColor: "#00000000",
                  borderWidth: 0
                }
              ]}
            >
              {this.props.data.title}
            </Text>
          </View>
        </View>
      </View>
    );
  }

  _getShowImageSource(contentData) {
    if (contentData.image_url) {
      return { uri: contentData.image_url };
    } else {
      return { uri: "" };
    }
  }
}
